<!doctype html>
<html>
<head>
	<title>FT scroller demo: horizontal paged, strict</title>
	<style>

		/* Styles not relevant to scrolling (just to make the demo look neat and tidy) */
		body { font-family: sans-serif; -webkit-text-size-adjust: 100% }
		#scrollable section:nth-child(2n) { background-color: #eee;}

		/* Set the size of the scroller.  Visible border to make the demo easier to understand */
		#scrollable { white-space: nowrap; width: 600px; height: 400px; border: 1px solid gray; overflow: hidden }

		/* Style each 'page' to be the same size and join together into a long horizontal strip.  Use display: table on the section wrapper to get rid of whitespace between the inline-blocks. */
		#sectionwrapper { width: 3600px; display: table }
		#sectionwrapper section { width: 600px; height: 400px; display: inline-block; vertical-align: top;}
		#sectionwrapper section div { padding: 50px; overflow: hidden; white-space: normal;}

	</style>
</head>
<body>
	<div id='scrollable'>
		<div id='sectionwrapper'>
			<section><div>Page 1<p>Swipe left to scroll the next page into view.  No matter how hard you fling...</p></div></section>
			<section><div>Page 2<p>... you will only be able to go one page at a time (useful for paginated articles).</p><p>Moves by direct input - mouse or finger on arger pages, or scrollwheels - can continue to scroll further.</div></section>
			<section><div>Page 3</div></section>
			<section><div>Page 4</div></section>
			<section><div>Page 5</div></section>
			<section><div>Page 6</div></section>
		</div>
	</div>

	<!--Include FT Scroller source (can be included at any point as long as it's loaded before being used)-->
	<script src='../lib/ftscroller.js'></script>

	<!--Set up the scroller-->
	<script>
		var scroller = new FTScroller(document.getElementById('scrollable'), {
			scrollingY: false,
			snapping: true,
			singlePageScrolls: true,
			scrollbars: false,
			bouncing: false
		});
	</script>
</body>
</html>